<template>
  <div class="content">
    <header>
      <el-form :model="searchData" class="searchForm">
        <el-form-item>
          <el-input v-model="searchData.keyword" clearable class="seech1" placeholder="输入停车场查询规则" @change="getTableData" />
        </el-form-item>
        <el-form-item style="width: 80px;">
          <el-button type="primary" icon="el-icon-search" @click="getTableData">搜索</el-button>
        </el-form-item>

        <div style="float: right;margin-right: 20px;">
          <el-button type="success" @click="addShow = true" icon="el-icon-circle-plus-outline">新增规则</el-button>
        </div>
      </el-form>
    </header>

    <section>
      <el-table :data="tableData" height="100%" border v-loading="loading">
        <el-table-column prop="ruleName" label="规则名称" align="center" />
        <el-table-column prop="parkCount" label="适用停车场数量" align="center" />
        <el-table-column prop="rule" label="规则内容" align="center">
          <template slot-scope="scope">
            <el-popover trigger="hover">
              <span slot="reference" class="seeRule">鼠标移入查看</span>
              <span v-html="scope.row.feeScaleDesc"/>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center" />
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#46a6ff"
              inactive-color="#ccc"
              @change="switchStatus(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="upDataShow = true; id = scope.row.id">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>

    <!-- 分页 -->
    <footer>
      <el-pagination
        :hide-on-single-page="false"
        :current-page="searchData.pageNum"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="10"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </footer>

    <el-dialog title="新增时长服务规则" :visible.sync="addShow" width="720px" :close-on-click-modal="false" :close-on-press-escape="false" :append-to-body="true">
      <AddRule v-if="addShow" @closeDialog="addShow = false" @refresh="getTableData" />
    </el-dialog>

    <el-dialog title="修改时长服务规则" :visible.sync="upDataShow" width="720px" :close-on-click-modal="false" :close-on-press-escape="false" :append-to-body="true">
      <UpdataRule v-if="upDataShow" :id="id" @closeDialog="upDataShow = false" @refresh="getTableData()" />
    </el-dialog>
  </div>
</template>

<script>
import AddRule from './components/addRule.vue'
import UpdataRule from './components/updataRule.vue'

export default {
  name: 'Alreadypaid',
  components: {
    AddRule,
    UpdataRule
  },
  filters: {
    // filterRule(e) {
    //   console.log(e)
    //   var ss = e.replaceAll("|", "\n");
    //   return ss
    // }
  },
  data() {
    return {
      tableData: [],
      loading: true,
      addShow: false,
      upDataShow: false,
      searchData: {
        pageSize: 10,
        pageNum: 1
      },
      total: null
    }
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    getTableData() {
      this.$axios({
        method: 'get',
        url: '/promotion/duration-rule/getDurationRulePage',
        params: this.searchData
      }).then((res) => {
        res.data.records.forEach((rule) => {
          rule.status = rule.status == 'OPEN'
          var feeScaleDesc = ''
          rule.feeScaleList.forEach((feeScale) => {
            feeScaleDesc += feeScale.amount + '元/' + feeScale.duration + '小时<br>'
          })
          rule.feeScaleDesc = feeScaleDesc
        })
        this.tableData = res.data.records;
        this.total = res.data.total;
        this.loading = false;
      })
    },

    switchStatus(e) {
      const status = e.status == true ? 'OPEN' : 'CLOSE';
      this.$axios({
        method: 'post',
        url: '/promotion/duration-rule/switchStatus',
        data: this.$qs.stringify({ id: e.id, status: status })
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success('规则状态修改成功！')
        } else {
          this.$message.warning('规则状态修改失败！')
        }
      })
    },

    // 分页修改每页显示条数
    handleSizeChange(val) {
      this.searchData.pageSize = val;
      this.getTableData();
    },
    // 分页跳转页面
    handleCurrentChange(val) {
      this.searchData.pageNum = val;
      this.getTableData();
    }
    // handleClose(done) {
    //   this.$confirm('确认关闭？')
    //     .then(_ => {
    //       done();
    //     })
    //     .catch(_ => {});
    // },
  }
}
</script>

<style scoped>
  .content {
    height: 100%;
    width: 100%;
  }
  header {
    height: 50px;
  }
  section {
    height: calc(100% - 80px);
  }
  footer {
    height: 50px;
    width: 100%;
    position: absolute;
    bottom: -30px;
  }
 .searchForm .el-form-item {
 	width: 180px;
 	display: inline-block;
 }
 .seech1 {
  width: 160px;
 }
 .seeRule {
   color: #09CCDE;
 }
 .seeRule:hover {
   cursor: pointer;
 }

</style>
